/**
 * create by young (young2f@outlook.com) on 2020/9/12
 */


'use strict';
import React from 'react';
import {connect} from 'dva/index';
import {DatePicker, Drawer, Form, Table} from 'antd';

import styles from '../index.less';
import FormBase from '../../components/Base/FormBase';
import moment from 'moment';
import 'moment/locale/zh-cn';
import ViewTitle from "../../components/ViewTitle";
import {FormField, SearchForm} from "antd-extra";
import ModalDiscardDetail from "./modal/ModalDiscardDetail";

const {RangePicker} = DatePicker;
moment.locale('zh-cn');

const _ = require('lodash');

@Form.create()
@connect(({
            user,
            global,
            customer,
            sales,
            dict,
            material,
            store
          }) => ({...user, ...global, ...dict, ...material, ...customer, ...sales, ...store}))
export default class Discard extends FormBase {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    const payload = this.props.form.getFieldsValue();
    _.map(payload, (value, key) => {
      if (value === '') {
        payload[key] = undefined;
      }
    });

    this.props.dispatch({
      type: 'store/findDiscardRecordMany',
      payload
    });
  }


  columns() {
    const cols = this.getDiscardTableColumns();
    cols.push({
      title: '操作', dataIndex: 'opt', key: 'opt', fixed: 'right', render: (value, record) => {
        return <span>
  <a style={{marginRight: '6px'}} onClick={() => {
    this.setState({showDetail: true, record});
  }}>详情</a>
</span>;
      }
    });
    return cols;
  }


  render() {
    const {form, discardRecords = []} = this.props;
    const {showDetail, record} = this.state;
    return <Form className={styles.content}>

      <ViewTitle
        title={`报废申请列表`}
        level={1}
      ></ViewTitle>
      <SearchForm
        style={{marginLeft: '6px', marginRight: '6px'}}
        onSearch={() => {
          this.state.current = 1;
          this.componentDidMount();
        }}
        onReset={this.handleReset}
        cols={4}
        min={8}
        expandText="展开"
        form={form}
      >
        {[
          // <FormField
          //   label="供应商名称"
          //   name="vendor"
          //   key={1}
          // >
          //   <Input allowClear placeholder={`请输入`}/>
          // </FormField>,
          // <FormField
          //   label={'采购公司'}
          //   name={`division`}
          //   key={`division`}
          // >
          //   <Select allowClear placeholder={`请输入采购公司`}>{this.getDivision(divisionDict)}</Select>
          // </FormField>,
          <FormField
            label={`创建时间`}
            name="createdTs"
            key={3}
            initialValue={[this.getSearchStart1Months(), this.getDefaultSearchEndDate()]}
          >
            <RangePicker allowClear={true}
              // style={{ width: '150%' }}
            />
          </FormField>
        ]}
      </SearchForm>
      <Table
        className={styles.antTable}
        bordered={true}
        columns={this.columns()}
        dataSource={discardRecords}
        scroll={{x: true}}
        pagination={{
          current: this.state.current,
          total: this.state.total,
          showSizeChanger: true,
          onChange: page => {
            this.state.current = page;
            this.componentDidMount();
          },
          onShowSizeChange: (current, pageSize) => {
            this.state.current = 1;
            this.state.pageSize = pageSize;
            this.componentDidMount();
          }
        }}
      ></Table>
      {showDetail && <Drawer
        visible={showDetail}
        title={`详情`}
        placement="left"
        width={'80%'}
        style={{padding: 0}}
        onClose={() => {
          this.setState({showDetail: false});
          this.componentDidMount();
        }}
      >
        <ModalDiscardDetail
          isReview={true}
          record={record}
          callback={()=>{this.componentDidMount()}}
        > </ModalDiscardDetail>
      </Drawer>}

    </Form>;
  }
}
